<template>
  <!-- <view style="width: 100%; height: 100%" >
        <iframe style="width: 100%; height: 100vh; border: 0" frameborder="0" :src="helpSrc"></iframe>
      </view> -->
  <div>
    <beautiful-chat
      :participants="participants"
      :titleImageUrl="titleImageUrl"
      :onMessageWasSent="onMessageWasSent"
      :messageList="messageList"
      :newMessagesCount="newMessagesCount"
      :isOpen="isChatOpen"
      :close="closeChat"
      :icons="icons"
      :open="openChat"
      :showEmoji="true"
      :showFile="true"
      :showEdition="true"
      :showDeletion="true"
      :deletionConfirmation="true"
      :showTypingIndicator="showTypingIndicator"
      :showLauncher="true"
      :showCloseButton="true"
      :colors="colors"
      :alwaysScrollToBottom="alwaysScrollToBottom"
      :disableUserListToggle="false"
      :messageStyling="messageStyling"
      @onType="handleOnType"
      @edit="editMessage"
    />
  </div>
</template>
<script setup name="AiChat">
import axios from "axios";
import { inject, onMounted, toRefs } from "vue";
const helpSrc = ref("http://ai.apisev.cn/chat/demo2");
const data = reactive({
  participants: [
    {
      id: "gpt",
      name: "咨询助手",
      imageUrl: "https://s1.ax1x.com/2023/04/05/pp5h4r6.png",
    }
  ], // the list of all the participant of the conversation. `name` is the user name, `id` is used to establish the author of a message, `imageUrl` is supposed to be the user avatar.
  titleImageUrl: "https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png",
  messageList: [
    { type: "text", author: `gpt`, data: { text: `请说出您的问题` } },
  ], // the list of the messages to show, can be paginated and adjusted dynamically
  newMessagesCount: 0,
  isChatOpen: false, // to determine whether the chat window should be open or closed
  showTypingIndicator: "", // when set to a value matching the participant.id it shows the typing indicator for the specific user
  colors: {
    header: {
      bg: "#4e8cff",
      text: "#ffffff",
    },
    launcher: {
      bg: "#4e8cff",
    },
    messageList: {
      bg: "#ffffff",
    },
    sentMessage: {
      bg: "#4e8cff",
      text: "#ffffff",
    },
    receivedMessage: {
      bg: "#eaeaea",
      text: "#222222",
    },
    userInput: {
      bg: "#f4f7f9",
      text: "#565867",
    },
  }, // specifies the color scheme for the component
  alwaysScrollToBottom: false, // when set to true always scrolls the chat to the bottom when new events are in (new message, user starts typing...)
  messageStyling: true, // enables *bold* /emph/ _underline_ and such (more info at github.com/mattezza/msgdown)
});
const {
  participants,
  titleImageUrl,
  messageList,
  newMessagesCount,
  isChatOpen,
  showTypingIndicator,
  colors,
  alwaysScrollToBottom,
  messageStyling,
} = toRefs(data);
function sendMessage(text) {
  if (text.length > 0) {
    newMessagesCount.value = isChatOpen.value ? newMessagesCount.value : newMessagesCount.value + 1;
    this.onMessageWasSent({ author: "support", type: "text", data: { text } });
  }
}
// 调用消息发送
function onMessageWasSent(message) {
  // called when the user sends a message
  messageList.value = [...messageList.value, message];
  reqGPT(message.data.text)

}
// 调用查询接口
function reqGPT(content){
  console.log(content)
  let message = { type: "text", author: `gpt`, data: { text: `正在为您查询` } };
  messageList.value = [...messageList.value, message];
  axios({
    url: "http://ai.apisev.cn/openai/chat",
    method: "post",
    data: {
      chatId: 156892,
      content: content,
      withContext: 1,
    },
  }).then((res) => {
    console.log(res);
    let result = res.data;
    messageList.value[messageList.value.length - 1] = { type: "text", author: `gpt`, data: { text: result } };
    
  });
}
function openChat() {
  // called when the user clicks on the fab button to open the chat
  isChatOpen.value = true;
  newMessagesCount.value = 0;
}
function closeChat() {
  // called when the user clicks on the botton to close the chat
  isChatOpen.value = false;
}
function handleScrollToTop() {
  // called when the user scrolls message list to top
  // leverage pagination for loading another page of messages
}
function handleOnType() {
  console.log("Emit typing event");
}
function editMessage(message) {
  const m = messageList.value.find((m) => m.id === message.id);
  m.isEdited = true;
  m.data.text = message.data.text;
}
</script>
<style></style>
